<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CanvaShop</title>
    <link href="Resources/Default.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div>
    <div id="CanvaShopView">
        <canvas id="CanvaShop" width="600" height="600" style="border:1px solid #000;"></canvas>
    </div>

    <div id="Panel">
        <div class="box toolbox col2">
            <div class="hd"><h5>Tools</h5></div>
            <div class="bd">
                <ul id="tools">
                  <li><button id="ButtonToolMove" class="selected" title="Move tool">Hand</button></li>
                  <!--<li><button id="BtnToolPoint">Point</button></li>-->
                  <li><button id="ButtonToolLine" title="Line tool">Line</button></li>
                  <li><button id="ButtonToolRect" title="Rect tool">Rect</button></li>
                  <li><button id="ButtonToolPolygon" title="Polygon tool">Polygon</button></li>
                  <li><button id="ButtonToolCurve" title="Curve tool">Curve</button></li>
                  <li><button id="ButtonToolCircle" title="Circle tool">Circle</button></li>
                  <li><button id="ButtonToolImage" title="Image tool">Image</button></li>
                  <li><button id="ButtonToolZoom" title="Zoom tool">Zoom</button></li>
                  <li><button id="ButtonToolText" title="Text tool">Text</button></li>
                  <!--<li><button id="BtnToolArc">Arc</button></li>-->
                </ul>
            </div>
        </div>

        <div class="box menu col10">
            <div class="hd"><h5>Menu</h5></div>
            <div class="bd">
                <ul>
                    <li>File
                        <ul>
                            <li><button>Open</button></li>
                            <li><button>Save</button></li>
                            <li><button>Save As ...</button></li>
                            <li><button>Exit</button></li>
                        </ul>
                    </li>
                    <li>Edit
                        <ul id="operations">
                          <li><button id="ButtonEditUndo">Undo</button></li>
                          <li><button id="ButtonEditRedo">Redo</button></li>
                          <li><button id="ButtonEditClear">Clear</button></li>
                          <li><button id="ButtonMoveObjUp">Up</button></li>
                          <li><button id="ButtonMoveObjDown">Down</button></li>
                          <li><button id="ButtonMoveObjTop">Top</button></li>
                          <li><button id="ButtonMoveObjBottom">Bottom</button></li>
                          <li><button onclick="randomShapes();">Random Shapes</button></li>
                          <li><button id="ButtonNewLayout">New Layout</button></li>
                        </ul>
                    </li>
                    <li>Help
                        <ul>
                            <li>About ...</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="box col10">
            <div class="hd"><h5>Properties</h5></div>
            <div class="bd">
                <ul id="properties">
                  <li><input id="ChkIsFill" type="checkbox" />Fill</li>
                  <li>Fill Color: <input id="TxtFillColor" type="textFillColor" value="green" /></li>
                  <li>Stroke Color<input id="TxtStrokeColor" type="textStrokeColor" value="black" /></li>
                  <li>LineWidth: <input id="TxtLineWidth" type="textStrokeColor" value="1" /></li>
                  <li>Alpha: <input id="TxtAlpha" type="textStrokeColor" value="100" /></li>
                </ul>
            </div>
        </div>

        <div class="box col10">
            <div class="hd"><h5>Layouts</h5></div>
            <div class="bd">
                <ul id="LayoutsList" class="layout-list">
                </ul>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src='Lib/jquery.min.js'></script>
<script type="text/javascript" src='Lib/jquery-ui.min.js'></script>
<script type="text/javascript" src="TinyJS/TinyJS.js"></script>
<script type="text/javascript">
<!--
var _DEBUG = true;
try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
} catch(e) {
}

if (!window.console) {
    window.console = {
        log : function() {},
        info : function() {},
        assert : function() {},
        warn : function() {}
    };
}

//netscape.security.PrivilegeManager.enablePrivilege("UniversalFileRead");
(function() {
    require("CanvaShopApp");
    window.app = new CanvaShopApp({
        Element : document.getElementById("CanvaShop"),
        UIMessages : [
            "ButtonToolMove",
            //"ButtonToolPoint",
            "ButtonToolLine",
            "ButtonToolRect",
            "ButtonToolPolygon",
            "ButtonToolCurve",
            "ButtonToolCircle",
            "ButtonToolImage",
            "ButtonToolZoom",
            "ButtonEditClear",
            "ButtonEditUndo",
            "ButtonEditRedo",
            "ButtonNewLayout",
            "LayoutsList",
            "ButtonMoveObjUp",
            "ButtonMoveObjDown",
            "ButtonMoveObjTop",
            "ButtonMoveObjBottom"
        ]
    });

    $(".box").draggable().resizable();

    var randomColor = function() {
        return "#" + parseInt(((Math.random() * 240)+16), 10).toString(16)
                   + parseInt(((Math.random() * 240)+16), 10).toString(16)
                   + parseInt(((Math.random() * 240)+16), 10).toString(16);
    };

    var randomPoint = function() {
        return {
            X : parseInt(Math.random() * 600, 10),
            Y : parseInt(Math.random() * 600, 10)
        };
    };

    window.randomShapes = function() {
        var doc = app.Document, view = app.View;

        for (var i = 0; i < 100; ++i) {
            var rect = new RectObj(randomPoint(), randomPoint());
            rect.FillStyle = randomColor();
            rect.StrokeStyle = randomColor();
            rect.LineWidth = parseInt(Math.random() * 4, 10);
            rect.IsFill = Math.random() > 0.5 ? true : false;
            rect.Alpha = Math.random();
            doc.Add(rect);
        }
        view.Update();
    };
})();
//-->
</script>
<body>
</html>
